<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"
	scope="session" />
<!DOCTYPE HTML>
<html>
<head>
	<title>Rooms</title>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<link rel="stylesheet" href="css/lightbox.css">
	<link href="css/ionic.css" rel="stylesheet">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="" />
	<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<style type="text/css">
		.xx{
			margin-top:2em; 
		}
		.xxx{
			margin-top:1em; 
		}
	</style>
</head>
<body>
	<div class="header head-top">
		<div class="container">
			<div class="header-top">
				<nav class="navbar navbar-default">
					<div class="container-fluid">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<div class="navbar-brand">
								<h1><a href="user_index.html">Hotel</a></h1>
							</div>
						</div>
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav">
								<li><a href="user_index.html">酒店<span class="sr-only">(current)</span></a></li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">房间 <span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li><a href="rooms.jsp">双人标间</a></li>
										<li><a href="rooms.jsp">豪华大床</a></li>
										<li><a href="rooms.jsp">情侣主题</a></li>
										<li><a href="rooms.jsp">商务标间</a></li>
										<li><a href="rooms.jsp">商务套间</a></li>
									</ul>
								</li>
								<li><a href="services.html">服务</a></li>
								<li><a href="about.jsp">个人中心</a></li>
								<li><a href="../index.jsp">退出</a></li>
							</ul>
						</div>
					</div>
				</nav>
			</div>
		</div>
	</div>
	<div class="content">
		<div class="room-section">
			<div class="container">
				<h2>rooms</h2>
				<div class="room-grids">
					<div class="room1">
						<div class="col-md-5 room-grid">
							<a href="#" class="mask">
							<img src="images/r1.jpg" class=" mask img-responsive zoom-img" alt="" /></a>
						</div>
						<div class="col-md-7 room-grid1">
							<h4>双人标间</h4>
							<p>
								房间面积 30 平方米（323 平方英尺），有外窗可欣赏城市景观<br>
								网络 - 独立的免费无线和有线上网接入服务<br>
								娱乐 - 50 英寸 液晶电视<br>
								餐饮 - 免费早餐（两份）、客房送餐服务和免费瓶装水<br>
								舒适睡眠 - 1.5m*2m床两张，高档床上用品和遮光窗帘<br>
								浴室 - 私人浴室、浴衣，独立浴缸和淋浴备有雨淋花洒<br>
								实用 - 沙发、保险箱、电话和书桌<br>
								舒适设施/服务 - 空调和每日客房清洁<br>
								温馨提示 - 不提供婴儿床<br>
								无烟客房<br>
							</p>
							<button>预订</button>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="room2">
						<div class="col-md-5 room-grid">
							<a href="#" class="mask">
							<img src="images/r2.jpg" class="img-responsive zoom-img" alt="" /></a>
						</div>
						<div class="col-md-7 room-grid1">
							<h4>豪华大床</h4>
							<p>
								房间面积 30 平方米（323 平方英尺），有外窗可欣赏城市景观<br>
								网络 - 独立的免费无线和有线上网接入服务<br>
								娱乐 - 50 英寸 液晶电视<br>
								餐饮 - 免费早餐（两份）、客房送餐服务和免费瓶装水<br>
								舒适睡眠 - 2.2m*2m床一张，高档床上用品和遮光窗帘<br>
								浴室 - 私人浴室、浴衣，独立浴缸和淋浴备有雨淋花洒<br>
								实用 - 沙发、保险箱、电话和书桌<br>
								舒适设施/服务 - 空调和每日客房清洁<br>
								温馨提示 - 不提供婴儿床<br>
								无烟客房<br>
							</p>
							<button>预订</button>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="room3">
						<div class="col-md-5 room-grid">
							<a href="#" class="mask">
							<img src="images/r3.jpg" class="img-responsive zoom-img" alt="" /></a>
						</div>
						<div class="col-md-7 room-grid1">
							<h4>情侣主题</h4>
							<p>
								房间面积 40 平方米（430 平方英尺），有外窗可欣赏城市景观<br>
								网络 - 独立的免费无线和有线上网接入服务<br>
								娱乐 - 55 英寸 液晶电视<br>
								餐饮 - 免费早餐（两份）、客房送餐服务和免费瓶装水<br>
								舒适睡眠 - 2.2m圆床一张，高档床上用品和遮光窗帘<br>
								浴室 - 私人浴室、浴衣，独立浴缸和淋浴备有雨淋花洒<br>
								实用 - 沙发、保险箱、电话和书桌<br>
								舒适设施/服务 - 空调和每日客房清洁<br>
								温馨提示 - 不提供婴儿床<br>
								无烟客房<br>
							</p>
							<button>预订</button>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="room4">
						<div class="col-md-5 room-grid">
							<a href="#" class="mask">
							<img src="images/r4.jpg" class="img-responsive zoom-img" alt="" /></a>
						</div>
						<div class="col-md-7 room-grid1">
							<h4>商务标间</h4>
							<p>
								房间面积 40 平方米（430 平方英尺），有外窗可欣赏城市景观<br>
								网络 - 独立的免费无线和有线上网接入服务<br>
								娱乐 - 55 英寸 液晶电视<br>
								餐饮 - 免费早餐（两份）、客房送餐服务和免费瓶装水<br>
								舒适睡眠 - 2.2m*2m床两张，高档床上用品和遮光窗帘<br>
								浴室 - 私人浴室、浴衣，独立浴缸和淋浴备有雨淋花洒<br>
								实用 - 沙发、保险箱、电话和书桌<br>
								舒适设施/服务 - 空调和每日客房清洁<br>
								温馨提示 - 不提供婴儿床<br>
								无烟客房<br>
							</p>
							<button>预订</button>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="room5">
						<div class="col-md-5 room-grid">
							<a href="#" class="mask">
								<img src="images/r5.jpg" class=" mask img-responsive zoom-img" alt="" /></a>
						</div>
						<div class="col-md-7 room-grid1">
							<h4>商务套间</h4>
							<p>
								房间面积 60 平方米（646 平方英尺），有外窗可欣赏城市景观<br>
											房间内含客厅，提供茶具，方便会客。<br>
								网络 - 独立的免费无线和有线上网接入服务<br>
								娱乐 - 50 英寸 液晶电视<br>
								餐饮 - 免费早餐（两份）、客房送餐服务和免费瓶装水<br>
								舒适睡眠 - 1.5m*2m床两张，高档床上用品和遮光窗帘<br>
								浴室 - 私人浴室、浴衣，独立浴缸和淋浴备有雨淋花洒<br>
								实用 - 沙发、保险箱、电话和书桌<br>
								舒适设施/服务 - 空调和每日客房清洁<br>
								温馨提示 - 不提供婴儿床<br>
								无烟客房<br>
							</p>
							<button>预订</button>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="room6">
						<div class="col-md-5 room-grid">
							<a href="#" class="mask">
								<img src="images/c1.jpg" class=" mask img-responsive zoom-img" alt="" /></a>
						</div>
						<div class="col-md-7 room-grid1">
							<h4>地下车场</h4>
							<p>
								面积 360 平方米（3800 平方英尺）<br>
								停车场找车机<br>
								视频免取卡收费<br>
								视频车位引导<br>
								超声波车位引导<br>
								无线超声波车位引导<br>
								户外停车场车位引导<br>
								免费泊车<br><br><br><br>
							</p>
							<button>预订</button>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<div class="touch-section">
			<div class="container">
				<h3>联系我们&nbsp;get in touch</h3>
				<div class="touch-grids">
					<div class="col-md-4 touch-grid">
						<h4>地址</h4>
						<h5>银座</h5>
						<p>一米阳光广场</p>
						<p>怡海阁</p>
					</div>
					<div class="col-md-4 touch-grid">
						<h4>联系方式</h4>
						<h5>电话&Email</h5>
						<p>180 0603 6035</p>
						<p><a href="mailto:example@mail.com"> example@mail.com</a></p>
					</div>
					<div class="col-md-4 touch-grid">
						<h4>在线联系</h4>
						<h5>QQ&微信</h5>
						<p>9798336677</p>
						<p>180 0603 6035</p>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="footer-section">
		<div class="container">
			<div class="footer-top">
				<p></p>
			</div>
		</div>
	</div>
	<div id="orderRoom" style="display: none;">
		<form action="" method="get" class="form-horizontal">
			<input type="hidden" value="${user.u_id }" name="u_id">
			<div class="room-grid xx">
				<div class="col-sm-1 room-grid"></div>
				<label class="col-sm-2 room-grid">预订人</label>

				<div class="col-sm-8 room-grid">
					<input type="text" name="u_name" class="form-control"
						value="${user.u_name }" readonly="readonly">
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="room-grid xx">
				<div class="col-sm-1 room-grid"></div>
				<label class="col-sm-2 room-grid">房间类型</label>

				<div class="col-sm-8 room-grid">
					<input type="text" name="r_type" class="form-control" value=""
						readonly="readonly">
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="room-grid xx">
				<div class="col-sm-1 room-grid"></div>
				<label class="col-sm-2 room-grid">房间价格</label>

				<div class="col-sm-8 room-grid">
					<input type="text" name="r_price" class="form-control"
						readonly="readonly">
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="room-grid xx">
				<div class="col-sm-1 room-grid"></div>
				<label class="col-sm-2 room-grid">房间号码</label>

				<div class="col-sm-8 room-grid">
					<select class="col-sm-12 room-grid">

					</select>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="room-grid xx">
				<div class="col-sm-1 room-grid"></div>
				<label class="col-sm-2 room-grid">入住时间</label>

				<div class="col-sm-8 room-grid">
					<input type="date" name="o_date" class="form-control"></input>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="room-grid xx">
				<div class="col-sm-1 room-grid"></div>
				<label class="col-sm-2 room-grid">入住天数</label>

				<div class="col-sm-8 room-grid">
					<input type="text" name="o_days" class="form-control">
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="room-grid xx">
				<div class="col-sm-1 room-grid"></div>
				<div class="col-sm-2 room-grid">
					<input class="btn btn-primary" type="button"
						onclick="addRoomOrder()" value="预订">
				</div>
				<div class="col-sm-7 room-grid"></div>
				<div class="col-sm-2 room-grid">
					<input class="btn btn-white" type="button" onclick="closeLayer()"
						value="取消">
				</div>
			</div>
		</form>
	</div>
	<!--  style="display: none;"-->
	<div id="orderCar" style="display: none;font-size: 30px;">
		<input type="hidden" value="${user.u_id }" name="u_id">
		<div class="room-grid xxx" >
				<div class="col-sm-4 room-grid"></div>
				<label class="col-sm-4 room-grid">请选择车位</label>
				<div class="clearfix"></div>
				<div class="col-sm-1 room-grid"></div>
				<div class="col-sm-10 room-grid" id="parking">
					
				</div>
				<div class="clearfix"></div>
			</div>
		<div class="room-grid xxx">
				<div class="col-sm-1 room-grid"></div>
				<div class="col-sm-2 room-grid">
					<input class="btn btn-primary" type="button"
						onclick="addCarOrder()" value="预订">
				</div>
				<div class="col-sm-7 room-grid"></div>
				<div class="col-sm-2 room-grid">
					<input class="btn btn-white" type="button" onclick="closeLayer()"
						value="取消">
				</div>
			</div>
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="${ctx}/js/plugins/layer/layer.min.js"></script>
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<script type="text/javascript">
	$('button').click(
			function() {
				if ($(this).siblings('h4').text() == '地下车场') {
					$.ajax({
						url : '${ctx}/UserServlet/listAllCar',
						type : 'post',
						success : function(r) {
							var jj = JSON.parse(r);
							jj = jj.carList;
							$('#parking').html("");
							for(i in jj){
								var car = jj[i];
								var c_id=car['c_id'];
								var c_order=jj[i]['c_order'];
								if (c_id<10) {
									c_id="0"+c_id;
								}
								if (c_order=='是') {
									$('#parking').append(
											"<label class=\"checkbox\">"+
											"<input type=\"checkbox\" value=\""+
											c_id+"\" name=\"checkbox\" disabled/>"+
											c_id+"</label>&nbsp;&nbsp;&nbsp;&nbsp;"	
										);
								} else{
									$('#parking').append(
											"<label class=\"checkbox\">"+
											"<input type=\"checkbox\" value=\""+
											c_id+"\" name=\"checkbox\"/>"+
											c_id+"</label>&nbsp;&nbsp;&nbsp;&nbsp;"	
										);
								}
							}
							layer.open({
								type : 1,
								content : $('#orderCar'),
								area : [ '800px', '550px' ],
								offset : '70px',
								title : '预订车位',
								fixed : true,
							});
						}
					})	
				} else {
					$.ajax({
						url : '${ctx}/UserServlet/queryRoomByType',
						type : 'post',
						data : {
							"type" : $(this).siblings('h4').text()
						},
						success : function(r) {
							var jj = JSON.parse(r);
							$('[name=r_type]').val(jj['type'])
							$('[name=r_price]').val(jj['price'] + "/天")
							$('[name=o_date]').blur(function() {
								var date = jj['indate'];
								var Udate = $(this).val();
								if (date > Udate) {
									layer.msg("当前时间不可用");
									$('[name=o_date]').val("");
								}
							})
							$('select').html('<option value ="">请选择</option>');
							var arr = jj['r_idlist'];
							for (i in arr) {
								var r_id = arr[i];
								$('select').append(
										"<option value ="+r_id+">" + r_id
												+ "</option>");
							}
							layer.open({
								type : 1,
								content : $('#orderRoom'),
								area : [ '800px', '500px' ],
								offset : '70px',
								title : '预订房间',
								fixed : true,
							});
						}
					});
				}
			});
	function addRoomOrder() {
		if (confirm('是否预订')) {
			$.ajax({
				url : '${ctx}/UserServlet/addRoomOrder',
				type : 'post',
				data : {
					"u_id" : $("[name=u_id]").val(),
					"r_type" : $("[name=r_type]").val(),
					"r_price" : $("[name=r_price]").val(),
					"r_num" : $('select').val(),
					"o_date" : $('[name=o_date]').val(),
					"o_days" : $('[name=o_days]').val()
				},
				success : function(r) {
					if (r) {
						layer.closeAll();
						layer.msg("预订成功");
						time: 5000;
					} else {
						layer.msg("预订失败");
					}
				}
			});
		}

	}
	function closeLayer() {
		layer.closeAll();
	}
	function addCarOrder() {
		if (confirm('是否预订')) {
			c_ids = $("input:checkbox:checked").map(function(index,elem) {
	            return $(elem).val();
	        }).get();
			if (c_ids=="") {
				layer.msg("请至少选择一个车位");
			}else if (c_ids.length>2) {
				layer.msg("每人最多预订两个车位");
			}else {
				c_ids=JSON.stringify(c_ids);
				$.ajax({
					url : '${ctx}/UserServlet/addCarOrder',
					type : 'post',
					data : {
						"u_id" : $("[name=u_id]").val(),
						"c_ids" : c_ids,
					},
					success : function(r) {
						console.log(r);
						if (r==0) {
							layer.msg("预订失败");
						} else {
							layer.closeAll();
							layer.msg("成功预订"+r+"个车位");
							time: 5000;
						}
					}
				}); 
			}
		}

	}
</script>
</html>
